<template>
    <div class="cham-tougao-head">
        <div class="cham-tougao-mini-header">
            <div class="cham-tougao-mini-header__content">
                <div style="float:left;width:40px;text-align:center;">
                    <span style="cursor:pointer" @click="goHome">主站</span>
                </div>

                <div style="float:left;width:40px;text-align:center;">
                    <span style="cursor:pointer">番剧</span>
                </div>

                <div style="float:left;width:64px;text-align:center;">
                    <span style="cursor:pointer">游戏中心</span>
                </div>

                <div style="float:left;width:40px;text-align:center;">
                    <span style="cursor:pointer">直播</span>
                </div>

                <div style="float:left;width:52px;text-align:center;">
                    <span style="cursor:pointer">会员购</span>
                </div>

                <div style="float:left;width:40px;text-align:center;">
                    <span style="cursor:pointer">漫画</span>
                </div>

                <div style="float:left;width:40px;text-align:center;">
                    <span style="cursor:pointer">赛事</span>
                </div>

                <div style="float:left;width:300px;">
                    <el-input placeholder="武汉肺炎-2019nCov" v-model="searchHotPoint" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>

                <chamHeadImg></chamHeadImg>

<!--                <div style="float:left;width:90px;margin-left:10px;">-->
<!--                    <div style="width:90px;height:40px;background-color:#FB7299;line-height:40px;text-align: center;border-radius:2px;cursor:pointer;color:#ffffff;">-->
<!--                        投稿-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>

    </div>
</template>

<script>

    import chamHeadImg from '@/components/headImg/chamHeadImg'

    export default {
        name: 'tougaoHeader',
        components:{chamHeadImg},
        data () {
            return {
                searchHotPoint:"",//查询热点信息
                userHeadUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            }
        },
        methods:{
            goHome(){
                this.$router.push({path:'/home'});
            }
        }
    }
</script>

<style scoped>
    .cham-tougao-head{
        width:100%;
        height:60px;
        min-width:999px;
        /*background-color:red;*/
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
    }

    .cham-tougao-mini-header{
        height:56px;
        width:100%;
    }

    .cham-tougao-mini-header__content{
        width:999px;
        height:36px;
        line-height:36px;
        margin:auto auto;
        padding:10px 24px;
        color:#212121;
    }

</style>
